<template>
  <div class="home">
    <h1 style="text-align: center">机械臂控制系统</h1>
    <!-- <div class="box">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="自定义指令">
          <el-input
            type="textarea"
            v-model="form.desc"
            style="font-size: 18px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">执行</el-button>
        </el-form-item>
      </el-form>
      <el-card class="box-card">
        <div slot="header">
          <span>机械臂2001端口返回值</span>
        </div>
        <div>关节实际位置 double</div>
        <div>关节设定位置 double</div>
        <div>关节速度 double</div>
        <div>关节加速度 double</div>
        <div>等等...</div>
      </el-card>
    </div> -->
    <div>
      <div>三维模拟</div>
      <!-- <el-image
        style="width: 400px; height: 400px"
        :src="url"
        :fit="scale - down"
      ></el-image> -->
      <div class="threed-container">
        <SCR3RobotArm
          src="media/robotArm.zip"
          :angle1="angle1"
          :angle2="angle2"
          :angle3="angle3"
          :angle4="angle4"
          :angle5="angle5"
          :angle6="angle6"
          :angle7="angle7"
        ></SCR3RobotArm>
      </div>
    </div>
  </div>
</template>

<script>
import SCR3RobotArm from "components/SCR3RobotArm";
export default {
  name: "Home",
  data() {
    return {
      url: "https://www.hualigs.cn/image/607e91792b33f.jpg",
      activeNames: ["1"],
      form: {
        desc: "",
      },
      angle1: 0,
      angle2: 0,
      angle3: 0,
      angle4: 0,
      angle5: 0,
      angle6: 0,
      angle7: 0,
      timer: null,
      //210506
      path: "ws://localhost:8040/2001/",
      socket: "",
      statusPackage: {
        analogInput: 0,
        jointActualPosition: [0, 0, 0, 0, 0, 0, 0]
      }
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    onSubmit() {
      console.log("submit!");
    },
    rotate() {
      function randomIntFromInterval(min, max) {
        // min and max included
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
      // this.angle1 = randomIntFromInterval(-180, 180);
      // this.angle2 = randomIntFromInterval(-120, 120);
      // this.angle3 = randomIntFromInterval(-180, 180);
      // this.angle4 = randomIntFromInterval(-120, 120);
      // this.angle5 = randomIntFromInterval(-180, 180);
      // this.angle6 = randomIntFromInterval(-120, 120);
      // this.angle7 = randomIntFromInterval(-180, 180);
    },
    init: function () {
      if(typeof(WebSocket) === "undefined"){
        alert("您的浏览器不支持socket")
      }else{
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      console.log(msg.data)
      // 这里注意一下 到底是什么情况
      var obj = JSON.parse(msg.data)
      this.statusPackage = obj
      this.angle1 = this.statusPackage.jointActualPosition[0]
      this.angle2 = this.statusPackage.jointActualPosition[1]
      this.angle3 = this.statusPackage.jointActualPosition[2]
      this.angle4 = this.statusPackage.jointActualPosition[3]
      this.angle5 = this.statusPackage.jointActualPosition[4]
      this.angle6 = this.statusPackage.jointActualPosition[5]
      this.angle7 = this.statusPackage.jointActualPosition[6]
    },
    send: function () {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    }
  },
  mounted() {
    this.init()
  },
  created() {
    this.timer = setInterval(this.rotate, 3000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  components: {
    SCR3RobotArm,
  },
};
</script>

<style>
/* .box {
  float: left;
  width: 50%;
} */

.threed-container {
  display: flex;
  align-content: center;
  align-items: center;
  margin: 0 auto;
  width: 600px;
}
</style>
